import React from 'react';
class BannerList extends React.Component {
    state = {
      list:this.props.list.concat(this.props.list[0])
    }
    render() {
        let { currentIndex,onInitIndex } = this.props;
        let {list} = this.state;
        let sty = {
          width:list.length*400+'px'
        }
        // 做个边界判断
        if(currentIndex === list.length){
          //要展示空白了
          // 闪到第一张
          Object.assign(sty,{
            transform:`translateX(0px)`,
          })
          // 紧接着像第二章移动
          setTimeout(() => {
            onInitIndex(1)
          }, 30);
        }else{
          Object.assign(sty,{
            transform:`translateX(${-currentIndex * 400}px)`,
            transition:'all 0.3s'
          })
        }
        
        return <ul className='ul_list_box' style={sty}>
            {
              list.map((item,index)=><li key={index}>
                内容是 {item}
              </li>)
            }
        </ul>;
    }
}
export default BannerList;
